<template>
  <div class="container">
    <van-nav-bar
      title="首件检检验详情"
      fixed
      class="titleStyle"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="publicBox">
      <div class="checkInputTop">
        <div class="checkInputTopCont">
          <h1>
            <span>送检工序：{{ `${detailsObj.procedureName}` }}</span>
          </h1>
          <ul>
            <li>
              <div>
                <b>工单批次号</b>
                <em>
                  <van-field
                    v-model="ruleForm.planBatchNo"
                    readonly
                    size="mini"
                  />
                </em>
              </div>
            </li>
            <li>
              <div>
                <b>班次</b>
                <em>
                  <van-field
                    v-model="ruleForm.shiftScheduleName"
                    readonly
                    size="mini"
                  />
                </em>
              </div>
            </li>
            <li>
              <div>
                <b>料号</b>
                <em>
                  <van-field
                    v-model="ruleForm.materialCode"
                    readonly
                    size="mini"
                  />
                </em>
              </div>
            </li>
            <li>
              <div>
                <b>品名</b>
                <em>
                  <van-field
                    v-model="ruleForm.materialName"
                    readonly
                    size="mini"
                  />
                </em>
              </div>
            </li>
            <li>
              <div>
                <b>规格型号</b>
                <em>
                  <van-cell-group>
                    <van-field
                      v-model="ruleForm.specifications"
                      readonly
                      size="mini"
                    />
                  </van-cell-group>
                </em>
              </div>
            </li>
            <li>
              <div>
                <b>数量</b>
                <em>
                  <van-field
                    v-model="ruleForm.selfCheckNum"
                    readonly
                    size="mini"
                  />
                </em>
              </div>
            </li>
            <li>
              <div>
                <b>自检结果</b>
                <em>
                  <van-radio-group
                    v-model="ruleForm.status"
                    class="radioStyle"
                    direction="horizontal"
                    
                  >
                    <van-radio :name="1" shape="square">合格</van-radio>
                    <van-radio :name="2" checked-color="red" shape="square"
                      >不合格</van-radio
                    >
                  </van-radio-group>
                </em>
              </div>
            </li>
            <li>
              <div>
                <b>检验结果</b>
                <em>
                  <van-radio-group
                    v-model="ruleForm.checkStatus"
                    class="radioStyle"
                    direction="horizontal"
                  >
                    <van-radio :name="1" shape="square">合格</van-radio>
                    <van-radio :name="2" checked-color="red" shape="square"
                      >不合格</van-radio
                    >
                  </van-radio-group>
                </em>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="checkContent">
        <el-table
          :style="{
            borderColor: '#ccc',
            'border-right': '1px solid #ccc',
            'border-bottom': '1px solid #ccc',
          }"
          :data="tableData"
          border
          height="100%"
          :cell-style="{ borderColor: '#ccc' + ' !important' }"
          :header-cell-style="{
            background: '#fff !important',
            borderColor: '#ccc' + ' !important',
          }"
        >
          <el-table-column
            type="index"
            label="序号"
            width="50px"
            align="center"
          />
          <el-table-column
            align="center"
            prop="itemName"
            label="检验项"
            min-width="100px"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            prop="toolName"
            label="检验工具"
            min-width="100px"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            prop="accpetRanger"
            label="合格范围"
            width="160px"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="actualValue"
            label="实测值"
            width="160px"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="decide"
            label="检验结果"
            width="200px"
          >
            <template #default="{ row }">
              <van-radio-group
                v-model="row.result"
                class="radioStyle"
                direction="horizontal"
              >
                <van-radio :name="1" shape="square">合格</van-radio>
                <van-radio :name="0" checked-color="red" shape="square"
                  >不合格</van-radio
                >
              </van-radio-group>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            prop="difference"
            label="标准值"
            min-width="100px"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            prop="upperDifference"
            label="上差"
            min-width="100px"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            prop="lowerDifference"
            label="下差"
            min-width="100px"
            show-overflow-tooltip
          />

          <el-table-column
            align="center"
            prop="isAutoStr"
            label="判定方式"
            min-width="100px"
            show-overflow-tooltip
          />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FirstCheckInput",
  data() {
    return {
      // Add your component data here
      detailsObj: {},
      ruleForm: {},
      tableData: [],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 输入框失焦
    inputBlur(event, row) {
      const { actualValue } = row;
      const { difference, upperDifference, lowerDifference } = row;
      if (actualValue === undefined || actualValue === null) return;
      let min = Number(difference) - Number(lowerDifference),
        max = Number(difference) + Number(upperDifference);
      row.result = actualValue >= min && actualValue <= max ? 1 : 0;
      // if (actualValue < min || actualValue > max) {
      //   return this.$dialog.alert({
      //     title: "提示",
      //     message: "实测值不在合格范围内",
      //   });
      // }
    },
    onchange(e, row) {
      console.log(e, row);
      
      // if (row.isAuto === 0) {
      //   row.result = e;
      // } else {
      //   row.result = null;
      // }
    },
    // 获取数据
    async getData() {
      this.detailsObj = this.$store.state.data;
      const res = await this.$axios.post(
        `/dobo-product/pro/first/article/check/enterDetails?id=${this.$store.state.data.id}`
      );
      if (res?.data.code === 200) {
        const { firstArticleCheckDetailList } = res.data.data;
        this.ruleForm = res.data.data;
        firstArticleCheckDetailList.forEach((item) => {
          item.itemStr = `${item.itemName}【${item.itemCode}】`;
          item.actualValue =
            item.actualValue || +item.actualValue === 0
              ? item.actualValue
              : undefined;
          const { difference, upperDifference, lowerDifference } = item;
          if (item.isAuto === 0) {
            let min = (
              Number(difference) - Math.abs(Number(lowerDifference))
            ).toFixed(4);
            let max = (Number(difference) + Number(upperDifference)).toFixed(4);
            item.accpetRanger = `${min} ~ ${max}`;
          }
          item.isAutoStr = item.isAuto === 0 ? "自动判定" : "人工判定";
        });
        this.tableData = firstArticleCheckDetailList;
      }
    },
    // 返回
    onClickLeft() {
      const { query } = this.$route;
      if (query.path) {
        this.$router.push(`/${query.path}`);
      } else {
        this.$router.push("/firstInspectionRecord");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  .checkInputTopCont {
    padding: 5px;
    h1 {
      height: 35px;
      line-height: 35px;
      font-weight: normal;
      text-align: center;
      background: #eeee;
    }
    ul {
      li {
        width: 33.3333%;
        height: auto;
        b {
          width: 100%;
          text-align: left;
          height: 35px;
          line-height: 35px;
          font-size: 20px;
        }
        em {
          width: 100%;
          .van-cell {
            width: 98%;
          }
        }
      }
      // li:first-child {
      //   width: 100% !important;
      //   .van-cell {
      //     width: 98% !important;
      //   }
      // }
    }
  }
  .checkContent {
    border-left: 1px solid #ccc;
    height: calc(100vh - 520px);
    // overflow: hidden;
  }
  .checkInputBottomCont {
    ul {
      li {
        width: 50%;
      }
    }
  }
}
</style>
<style lang="scss">
// .van-radio__icon--disabled .van-icon {
//   background-color: #fff;
// }
// .van-radio__label--disabled {
//   color: #323233;
// }
// .van-radio__icon--disabled.van-radio__icon--checked .van-icon {
//   color: #fff;
//   background-color: red;
// }
.checkContent {
  .el-table .el-table__cell {
    padding: 5px 0;
    .van-cell {
      padding: 5px;
      border: 1px solid #ccc;
    }
  }
}
.decideClass1 {
  width: 100%;
  height: 100%;
  background: red;
}
.decideClass2 {
  width: 100%;
  height: 100%;
  background: green;
}
</style>